<script setup>
import { Icon } from '#components'
// h函数用于创建虚拟节点，虚拟节点可当作属性传递给组件，也可直接当组件使用
const QuestionIcon = h(Icon, { name: 'uil:question-circle', size: '1.5rem' })

</script>
<template>
    <div>
        <h1>Welcome to the homepage</h1>
        <AppAlert>
            This is an auto-imported component
        </AppAlert>
        <!-- 注意：icon属性里的图标，大小跟随button字体的大小 -->
        <ElButton :icon="QuestionIcon" @click="$router.push('/about')">
            <!-- 使用组件插入icon，大小可自由控制 -->
            <QuestionIcon />
            Go to /about
        </ElButton>
    </div>
</template>
